<template>
	<view class="main animated fadeIn faster">
		<TitleBarVue :title="title"/>
		<view class="closeAll" v-if="user.length!=0" @click="closeAll">清空</view>
		<view class="JoinInList">
			<view class="item" v-if="user.length!=0" v-for="i in user" :key="i.id">
				<view class="info" @click="touser(i)">
					<view class="icon">
						<image v-bind:src="i.avatar" class="img-bg-img" mode="aspectFill" style="width: 100rpx;height: 100rpx;border-radius: 50%;"></image>
						<view class="sex">
							<image v-if="i.gender==2" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%203404.png"></image>
							<image v-if="i.gender==1" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%94%B7.png"></image>
						</view>
					</view>
					<view class="detailed" style="margin-left: 20rpx;">
						<view class="name">{{i.nickname}}</view>
						<view class="desc">我访问了他的主页</view>
					</view>
				</view>
			</view>
			<view v-if="user.length==0 && loaded" style="width: 100%; margin-top: 200rpx;"  >
			<text class="position-relative d-flex font-bold font30" style=" justify-content: center;align-items: center;top: 405rpx;">您暂时还没有浏览记录</text>
			<image class="position-relative" style="top: -73rpx;left: 58rpx;width: 80%;" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/xiaoda.png"></image>
			</view>
		</view>
		<view v-if="user.length!=0" class="tips">-只显示最近30天的浏览记录-</view>
	</view>
</template>

<script>
	import store from '@/store/index.js';
	import { userApi } from '../../http/userApi';
	import TitleBarVue from '../../components/TitleBar.vue';
	export default {
		data() {
			return {
				title: '浏览足迹',
				params:{
					type:4
				},
				param:{
					type: 4,
					pageIndex: 1,
					pageSize: 9
				},
				loaded: false,
				isLastPage: false,
				user:[]//传过来的用户
			}
		},
		components: {TitleBarVue},
		onReachBottom() {
			if (!this.isLastPage) {
				// 不是最后一页，可以继续加载
				this.param.pageIndex += 1; // 页码增加
				this.Relation();
			}
		},
		methods: {
			
			async clearAll(){
				
				let res=await userApi.clearAll(this.params);
				console.log(res);
				
				
				
				
			},
			async Relation(){
				this.loaded = false
				let res = await userApi.getFans(this.param);
				console.log(res);
				if (res.length < this.param.pageSize) {
				    this.isLastPage = true;
				}
				this.loaded = true
				const start = this.user.length;
				this.user.splice(start, 0, ...res.records);
				console.log(this.user);
			},
			closeAll(){
				this.clearAll();
				this.user=[];
				uni.showToast({
				    title: "清除成功",
				    icon: 'none', // 使用'none'图标，只显示文字
				    duration: 1000 // 显示持续时间
				  });
			},
			touser(i){
				let uid=i.toUid;
				uni.navigateTo({
				       url: `/pagesMain/HomePage/HomePage?id=${uid}`
				     });
					 
			}
			
		},
		mounted() {
			this.Relation();
		}
	}
</script>

<style scoped lang="scss">
.main {
	background: #fff;
	overflow: hidden;
	.content {
		width: 100%;
		background-color: #fff !important;
	}
	.closeAll {
		color: #1e1817;
		font-size: 30rpx;
		margin: 200rpx 60rpx 0 0;
		text-align: right;
	}
	.JoinInList {
		width: 730rpx;
		margin: 0 auto ;
		border-radius: 50rpx;
		background-color: #fff;
		overflow: hidden;
		padding-bottom: 10rpx;
		.item {
			width: 700rpx;
			height: 170rpx;
			margin: 25rpx auto;
			background-color: #f5f5f5;
			border-radius: 15rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.info {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 20rpx;
				.icon {
					position: relative;
					.bluricon {
						filter: blur(2px);
					}
					image {
						width: 152rpx;
						height: 152rpx;
					}
					.sex {
						position: absolute;
						bottom: 7rpx;
						right: 0rpx;
						image {
							width: 30rpx;
							height: 30rpx;
						}
					}
				}
				.detailed {
					.name {
						font-weight: 700;
						margin-bottom: 4rpx;
						color: #231815;
						font-size: 30rpx;
						image {
							filter: blur(3px);
							width: 130rpx;
							height: 30rpx;
						}
					}
					.desc {
						color: #595757;
						font-size: 22rpx;
					}
				}
			}
		}
	}
	.tips {
		color: #b5b5b5;
		text-align: center;
		margin-bottom: 50rpx;
	}
}
.title {
	display: flex;
	align-items: center;
	font-weight: 700;
	height: 80rpx;
	.goback {
		image {
			margin-left: 50rpx;
			width: 20rpx;
			height: 30rpx;
		}
	}
	text {
		flex: 1;
		margin-right: 50rpx;
		font-size: 34rpx;
		text-align: center;
	}
}
.pt-300 {
	padding-top: 300rpx;
}
</style>
